<template>
    <div class="view">
        <nav-bar backgroundColor="#7bbcff" color="#fff" title="我的收藏">
            <div class="back" slot="left" @click="back">
                <i class="iconfont icon-fanhui"></i>
            </div>
        </nav-bar>
        <div class="my-question-wrap">
            <cube-scroll :data="[...myFavquestionPackageList,...favoriteQuestionOverViewList] ">
                <list-cell @click="toQuestionDetail(index)" :showLeftSlot="true" v-for="(myFavquestionPackage,index) in myFavquestionPackageList" :key="'A'+index" :showBorder="index+1 !== myFavquestionPackageList.length">
                    <div class="question-item ellipsis" slot="leftSlot">
                        <img src="@/assets/image/icon-work.png">{{myFavquestionPackage.ExamName}}
                    </div>
                </list-cell>
                <list-cell @click="toQuestionDetail(index)" :showLeftSlot="true" v-for="(favoriteQuestionOverView,index) in favoriteQuestionOverViewList" :key="'B'+index" :showBorder="index+1 !== favoriteQuestionOverViewList.length">
                    <div class="question-item ellipsis" slot="leftSlot">
                        <img src="@/assets/image/icon-work.png">{{favoriteQuestionOverView.Grade + '-' + favoriteQuestionOverView.LessonName}}
                    </div>
                </list-cell>
            </cube-scroll>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";

    import NavBar from "@/components/aui/NavBar.vue";
    import ListCell from "@/components/aui/ListCell.vue";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";

    import CommonUnit from "@/unit/CommonUnit";

    @Component({
        components: {
            NavBar, ListCell
        }
    })
    export default class MyCollectQuestion extends Scene {
        private myFavquestionPackageList: any[] = [];
        private favoriteQuestionOverViewList: any[] = [];

        @State("UserStore")
        public user!: InterfaceUser;

        private mounted(): void {

            this.getFavoriteData();
        }

        private async getFavoriteData(): Promise<any> {
            const myFavquestionPackageListRes = await Http.get(this.api.myFavQuestionPackageList, CommonUnit.argumentWithUser(this.user, {pageIdx: "", pageSize: ""}));
            const favoriteQuestionOverViewRes = await Http.get(this.api.favoriteQuestionOverView, CommonUnit.argumentWithUser(this.user, {pageIdx: "", pageSize: ""}));
            if (myFavquestionPackageListRes.Success || favoriteQuestionOverViewRes.Success) {
                this.myFavquestionPackageList = myFavquestionPackageListRes.Data || [];
                this.favoriteQuestionOverViewList = favoriteQuestionOverViewRes.Data || [];
            } else {
                (<any> this).$createToast({
                    mask: true,
                    type: "warn",
                    time: 1500,
                    txt: "数据获取错误",
                    onTimeout: () => {
                        if (!CommonUnit.responseLoginVerification(myFavquestionPackageListRes) || !CommonUnit.responseLoginVerification(favoriteQuestionOverViewRes)) {
                            this.navigateLoginPage();
                        }
                    }
                }).show();
            }

        }

        private toQuestionDetail(i: number) {
            this.navigateTo({
                name: "questionDetail",
                query: {
                    grade: (<any> this).errorList[i].Grade,
                    lessonName: (<any> this).errorList[i].LessonName,
                    type: 2
                }
            });
        }

        private back(): void {
            this.navigateBack();
        }
    }
</script>

<style scoped lang="stylus">
    .view
        background $theme-page-common-background-color;
        height 100vh;

    .my-question-wrap
        width 100vw;
        height 100vh;
        padding-top 44px;

    .question-item
        display flex;
        height 30px;
        align-items center;
        flex-direction row;
        font-size 14px;

        img
            width 30px;
            height 30px;
            padding-right 10px;
</style>
